$link-color: $red-300;
$btn-primary-color: $red-300;

.success, .info, .warning, .alert {
	margin: 16px 0px;
	padding: 20px;
	position: relative;
	border-radius: 3px;
	width: 100%;
	display: block;
	background: #f5f6fa;
	border: 1px solid hsl(0, 0%, 85%);
	border-left: 4px solid;
	padding-left: 3.5em;
	
}
.success {
	border-left-color: rgb(38, 203, 124);
}
.info {
	border-left-color: rgb(56, 132, 255);
}
.warning {
	border-left-color: rgb(247, 125, 5);
}
.alert {
	border-left-color: rgb(255, 70, 66);
}

.success::before, .info::before, .warning::before, .alert::before {
	display: inline-block;
	position: absolute;
	left: 1.0em;
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	margin: 0px 10px 0px 0px;
}
.success::before {
	content: url("/assets/img/success.svg");
}
.info::before {
	content: url("/assets/img/info.svg");
}
.warning::before {
	content: url("/assets/img/warning.svg");
}
.alert::before {
	content: url("/assets/img/alert.svg");
}

.youtube-container {
	position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 9/16 */
}

.youtube-container > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.key {
	padding: 0px 5px;
	border-radius: 3px;
	border: 1px solid;
	border-color: hsl(0,0%,70%);
	background-color: hsl(0,0%,98%);
	font-style: normal;
	font-size: 14px; 	
}

.screenshot {
	animation: fadein 1.0s;
}

@keyframes fadein {
    0% 		{
			opacity: 0;
			border-radius: 100%;
			transform: scale(.3);
	}
	50%		{
			border-radius: 0%;
			transform: scale(1);
	}		
    100%   {
			opacity: 1;
	}
			
}